<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript image dropdown - Documentation</title>
<link rel="stylesheet" href="css/sample.css" />
<script src="../../jquery.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="../css/dd.css" />
<script src="../jquery.dd.min.js"></script>
<!-- </msdropdown> -->
<style type="text/css">
code.blue1 {color:#3300FF}
table.help {background:#fff; color:#000;}
.help td.title {background:#333; color:#fff; font-weight:bold}
.help td.title1 {background:#0099bf; color:#fff; font-weight:bold}
table.help{background:#c3c3c3; color:#000;}
table.help  td{background:#fff;color:#000}
pre{color:#000; background:#f2f2f2; padding:0 10px; max-width:80%; overflow:auto}
code.blue{color:#3300FF}

</style>
</head>
<body>
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
  <tr>
    <td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
  </tr>
  <tr>
    <td width="25%"><select style="width:250px"  name="pages" id="pages">
      <option value="" selected="selected">Choose a sample page</option>
      <option value="index.html">Normal</option>
      <option value="byjson.html">By Json Data</option>
      <option value="multiple-skin.html">Multiple Skin</option>
      <option value="css-sprite.html">CSS Sprite</option>
      <option value="object-oriented-approach.html">Object Oriented Approach</option>
      <option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
      <option value="use-checkbox.html">Use Checkbox</option>
      <option value="mouse-events.html">Mouse Events</option>
      <option value="help.html">Documentation</option>
    </select></td>
    <td align="left"><a href="help.html">Documentation</a></td>
  </tr>
</table>
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
  <table width="100%" border="0" cellspacing="1" cellpadding="5" class="help">
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td width="18%" class="title1"><strong>Properties</strong></td>
      <td width="8%">&nbsp;</td>
      <td width="74%"><strong>Please note:</strong> For setting properties. Please use <code class="blue1">set()</code> method. </td>
    </tr>
    <tr>
      <td class="title">Name</td>
      <td class="title">Type</td>
      <td class="title">Description</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>To check if  control is disabled or not. If it is disabled, it does not accept clicks.</td>
    </tr>
    <tr>
      <td>form</td>
      <td>HTMLFormElement</td>
      <td>Get the current associated form element.</td>
    </tr>
    <tr>
      <td>length</td>
      <td> number</td>
      <td>The number of <code class="blue1">&lt;option&gt;</code> elements in this select element.</td>
    </tr>
    <tr>
      <td>multiple</td>
      <td> boolean</td>
      <td>Get the curernt state of the control, which indicates whether multiple items can be selected.</td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>Get the name of the control.</td>
    </tr>
    <tr>
      <td>options</td>
      <td> HTMLOptionsCollection</td>
      <td>Get the all <code class="blue1">&lt;option&gt;</code> elements. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td>selectedIndex</td>
      <td>number</td>
      <td>The index of the first selected <code class="blue1">&lt;option&gt;</code> element.</td>
    </tr>
    <tr>
      <td>selectedOptions</td>
      <td>HTMLOptionsCollection</td>
      <td>The set of options that are selected. Returns as an array.</td>
    </tr>
    <tr>
      <td>size</td>
      <td> number</td>
      <td>Get the size of the element. which contains the number of visible items in the control. </td>
    </tr>
    <tr>
      <td>type</td>
      <td>string</td>
      <td>Get the  control's type. When multiple is true, it returns select-multiple; otherwise, it returns select-one. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>The value of this select control, that is, of the first selected option.</td>
    </tr>
    <tr>
      <td>selectedText</td>
      <td>string</td>
      <td>Get the current selected text. </td>
    </tr>
    <tr>
      <td>uiData</td>
      <td>object</td>
      <td valign="top"><p>Returns the following data.<br />
        data:{className,description,image,text,title,value}<br />
        index: 	 Number <br />
        option: 	HTMLOptionElement <br />
        ui: LI Object</p></td>
    </tr>
    <tr>
      <td colspan="3">And all  available  properties can be accessed from this control. i.e. children etc.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">Reaad only properties can't be set by <code class="blue1">set()</code> method.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td class="title1"><strong>Public Methods</strong></td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><pre>
<span style='color:#696969; '>//create msDropdown</span>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by jsondata</span>
<span style='color:#800000; font-weight:bold; '>var</span> jsonData <span style='color:#808030; '>=</span> <span style='color:#808030; '>[</span>                    
                <span style='color:#800080; '>{</span>description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Choos your payment gateway'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Payment Gateway'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>                    
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Amex-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'My life. My card...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'amex'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Amex'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Discover-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'It pays to Discover...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Mastercard-56.png'</span><span style='color:#808030; '>,</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Cash-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Sorry not available...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'cash'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Cash on devlivery'</span><span style='color:#808030; '>,</span> disabled<span style='color:#800080; '>:</span><span style='color:#0f4d75; '>true</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Visa-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'All you need...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Paypal-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Pay and get paid...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#800080; '>}</span>
                <span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>byJson<span style='color:#800080; '>:</span><span style='color:#800080; '>{</span>data<span style='color:#800080; '>:</span>jsonData<span style='color:#808030; '>,</span> name<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'payments'</span><span style='color:#800080; '>}</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
//Some usefull parameters can be passed while creating msDropdown. 
//These are default values.
{
    {byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250}, //if you want to create by json data
    mainCSS: 'dd',
    visibleRows: 7,
    rowHeight: 0,
    showIcon: true,
    zIndex: 9999,
    useSprite: false,
    animStyle: 'slideDown',
    event:'click', //it can be mouseover 
    openDirection: 'auto', //auto || alwaysUp || alwaysDown
    enableCheckbox:false, //this needs to multiple or it will set element to multiple
    checkboxNameSuffix:'_mscheck',
    append:'',
    prepend:'',
    reverseMode:true, //it will update the msdropdown UI/value if you update the original dropdown - will be usefull if are using knockout.js or playing with original dropdown
    roundedCorner:true, //to have rounded corner
    enableAutoFilter:true, //to enable autofilter
    on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,
    	dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null} //event cant be added from here too
}
</pre></td>
    </tr>
    <tr>
      <td>add</td>
      <td>&nbsp;</td>
      <td>Adds an option element to the select element.</td>
    </tr>
    <tr>
      <td colspan="3">
      <pre style='color:#000000;background:#ffffff;'><span style='color:#696969; '><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
//by traditional option tag</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by string</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by json</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by json with all properties</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Set my calendar'</span><span style='color:#808030; '>,</span> image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'/images/calendar.gif'</span><span style='color:#808030; '>,</span> className<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Calendar'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
  	</pre>
  </td>
    </tr>
    <tr>
      <td>remove</td>
      <td>&nbsp;</td>
      <td><p>Removes the option element at the specified index from the select element.</p></td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>remove<span style='color:#808030; '>(</span><span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>namedItem</td>
      <td>uiData Object</td>
      <td>Get the option element if there is name defined. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>item</td>
      <td>uiData Object</td>
      <td>Get the item specified by an index. Please refer above for uiData.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>set</td>
      <td>&nbsp;</td>
      <td>Set the element property.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>set<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>get</td>
      <td>&nbsp;</td>
      <td>Get the element property.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>get<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//You can get the property without using get method</span>
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropwdown<span style='color:#808030; '>.</span>selectedIndex<span style='color:#800080; '>;</span>
  </pre></td>
    </tr>
    <tr>
      <td>visible</td>
      <td>boolean/void</td>
      <td>Set and get the visible states.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>true</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//shows if hidden</span>
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>false</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//hide</span>
<span style='color:#800000; font-weight:bold; '>var</span> isVisible <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//returns current states</span>
  </pre></td>
    </tr>
    <tr>
      <td>close</td>
      <td>&nbsp;</td>
      <td>Closes the  msDropdown.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>close<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
    </tr>
    <tr>
      <td>open</td>
      <td>&nbsp;</td>
      <td>Opens the msDropdown. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>open<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> </pre></td>
    </tr>
    <tr>
      <td>showRows</td>
      <td rowspan="2">&nbsp;</td>
      <td rowspan="2">Used to set the visible rows.</td>
    </tr>
    <tr>
      <td>visibleRows</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>visibleRows<span style='color:#808030; '>(</span><span style='color:#008c00; '>10</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
  </pre></td>
    </tr>
    <tr>
      <td>on</td>
      <td>&nbsp;</td>
      <td>Add an events on element. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>on<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>console<span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>log</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span><span style='color:#800080; '>}</span><span style='color:#808030; '>);</span></pre></td>
    </tr>
    <tr>
      <td>off</td>
      <td>&nbsp;</td>
      <td>Remove an events on element.</td>
    </tr>
    <tr>
      <td colspan="3"><span style="color:#000000;background:#ffffff;">
        <pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>off<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</span><span style='color:#800080; '></span><span style='color:#808030; '>)</span>;</pre></td>
    </tr>
    <tr>
      <td>getData</td>
      <td>uiData</td>
      <td>Get the current selected uiData object.</td>
    </tr>
    <tr>
      <td colspan="3">var uiData = <span style="color:#000000;background:#ffffff;">oDropdown</span>.getData();</td>
    </tr>
    <tr>
      <td>act</td>
      <td>&nbsp;</td>
      <td>For everything else. You can call any exisitng method via this single method.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>add</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Lucky</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>remove</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>1</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> opt <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>namedItem</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
    </tr>
    <tr>
      <td>setIndexByValue</td>
      <td>&nbsp;</td>
      <td>Set index by value. (v 3.2)</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown.setIndexByValue(<span style='color:#008c00; '>"calendar"</span><span style='color:#808030; '>);</pre></td>
    </tr>
    <tr>
      <td>destroy</td>
      <td>&nbsp;</td>
      <td>Restore the original dorpdown.</td>
    </tr>
    <tr>
      <td colspan="3"><span style="color:#000000;background:#ffffff;">
        <pre style='color:#000000;background:#ffffff;'>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>destroy<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></pre></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>refresh</td>
      <td>&nbsp;</td>
      <td>Refresh the msdropdown UI and value based on original dropdown.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>refresh<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span>; //or
document.getElmentById(&quot;element&quot;).refresh();</pre></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<p>&nbsp;</p>

<script>
$(document).ready(function(e) {
	//no use
	try {
		var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
												var val = data.value;
												if(val!="")
													window.location = val;
											}}}).data("dd");

		var pagename = document.location.pathname.toString();
		pagename = pagename.split("/");
		pages.setIndexByValue(pagename[pagename.length-1]);
		$("#ver").html(msBeautify.version.msDropdown);
	} catch(e) {
		//console.log(e);	
	}
	
	$("#ver").html(msBeautify.version.msDropdown);
});
</script>

</body>
</html>
